<template>
  <div class="h-100 w-full flex flex-col">
    <div ref="chinaMap" class="flex-1 h-0"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { getMapDataApi } from "@/api";
import { useEchartsResizeAndDestory } from "../hooks/EchartsResizeAndDestoryHooks";

const chinaMap = ref(null);
const chinaMapInstance = shallowRef();

const mapStack = ref([]); //存储地图数据的栈
const option = {
  // 工具提示配置
  tooltip: {
    show: true,
    triggerOn: "mousemove",
    padding: [4, 8],
    borderWidth: 1,
    borderColor: "#409eff",
    backgroundColor: "rgba(255,255,255,0.7)",
    textStyle: {
      color: "#000000",
      fontSize: 13,
    },
    formatter: function (e) {
      return e.name;
    },
  },
  // 地理坐标系配置
  geo: [
    {
      map: "china", //地图类型
      z: 3, //层级
      zoom: 1.2, //缩放比例
      aspectScale: 0.85, // 宽高比
      roam: false, // 是否开启缩放和平移
      top: "10%", // 距离顶部的距离
      layoutSize: "100%", // 保持地图宽高比
      regions: [
        {
          // 隐藏南海诸岛，因为顶层已经添加过了
          name: "南海诸岛",
          itemStyle: {
            borderWidth: 0.5, // 边框宽度

            borderColor: "#61aacb", // 边框颜色
            areaColor: "#104584", // 区域颜色
          },
        },
      ],
      itemStyle: {
        borderColor: "#c8feff", // 边框颜色
        borderWidth: 0.5, // 边框宽度
        areaColor: "#0862db", // 区域颜色
      },
      emphasis: {
        itemStyle: {
          borderWidth: 1, // 边框宽度
          areaColor: "#2da9ff", // 区域颜色
        },
        label: {
          show: false, // 是否显示标签
          color: "#ffffff", // 标签颜色
        },
      },
      select: {
        itemStyle: {
          borderWidth: 1, // 边框宽度
          areaColor: "#2da9ff", // 区域颜色
        },
        label: {
          color: "#ffffff", // 标签颜色
        },
      },
    },
  ],
  // 系列配置
  series: [
    // 地图
    {
      type: "map",
      geoIndex: 0,
      data: [],
    },
  ],
};

onMounted(async () => {
  const code = "100000_full";
  await getMapData(code);
  init();
});
useEchartsResizeAndDestory(chinaMapInstance, chinaMap);

const init = () => {
  const echartsContainer = chinaMap.value;
  if (!echartsContainer) return;
  let topMapData = mapStack.value[mapStack.value.length - 1];
  echarts.registerMap("china", topMapData);
  chinaMapInstance.value = echarts.init(echartsContainer);

  // 取消浏览器默认的右键点击事件
  chinaMapInstance.value.getZr().on("contextmenu", (event) => {
    event.event.preventDefault();
  });
  // 为图表添加右键点击事件监听器
  chinaMapInstance.value.on("contextmenu", bindContextmenuChart);
  // 为图表添加左键点击事件监听器
  chinaMapInstance.value.on("click", handleLeftClick);
  chinaMapInstance.value.setOption(option);
};

// 绑定自定义右击事件
const bindContextmenuChart = (event) => {
  if (mapStack.value.length === 1) {
    ElMessage({
      message: "已经穿透在最顶层了",
      type: "warning",
    });
    return;
  }
  mapStack.value.pop();
  let topMapData = mapStack.value[mapStack.value.length - 1];
  console.log("右键单击数据", topMapData);

  echarts.registerMap("provinceName", topMapData);
  chinaMapInstance.value.setOption({
    geo: {
      map: "provinceName",
    },
  });
};
// 绑定自定义单击事件
const handleLeftClick = async (e) => {
  let provinceName = e.name;

  let clickMap = mapStack.value[mapStack.value.length - 1].features.find(
    (item) => {
      return item.properties.name === provinceName;
    }
  );
  const adcode = clickMap.properties.adcode + "_full";
  const res = await getMapDataApi(adcode);

  if (!mapStack.value.some((item) => item === res.data)) {
    mapStack.value.push(res.data);
  }
  echarts.registerMap(provinceName, res.data);
  chinaMapInstance.value.setOption({
    geo: {
      map: provinceName,
    },
  });
};

const getMapData = async (code) => {
  const res = await getMapDataApi(code);

  // 优化：检查栈中是否已经存在此地图数据，若不存在则入栈
  if (!mapStack.value.some((item) => item === res.data)) {
    mapStack.value.push(res.data);
  }
};
</script>

<style lang="scss" scoped></style>
